<template>
  <div class="button1" @click="playAll">
    <span>
      <i class="iconfont icon-bofang"></i>
      <span class="playall">播放全部</span>
    </span>
    <span class="plus">
      <i class="iconfont icon-jiahao"></i>
    </span>
  </div>
</template>

<script>
export default {
  name:'Button',
  methods:{
    playAll(){
      this.$emit('showDialog')
    }
  }
}

</script>

<style scoped>
  .button1{
    background-color:rgb(236,65,65);
    width:140px;
    box-sizing: border-box;
    height: 32px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .button1 span:first-child{
    width:120px;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .button1 .icon-bofang{
    margin-left:8px;
    color:#fff
  }
  .button1 .playall{
    margin-left:5px;
    color:#fff;
    font-size:14px;
  }
  .button1 .plus{
    width:40px;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    border-left:1px solid rgb(237,83,83)
  } 
  .button1 .icon-jiahao{
    color:rgb(254,244,244)
  }
  .button1 span:hover{
    cursor:pointer;
    background-color:rgb(204,50,50);
  }
</style>